<template>
  <Header />
  <main class="User">
    <div class="UserInfo"></div>
    <van-button type="primary" v-if="ifLogin" @click="logout()">退出登录</van-button>
  </main>
  <Footer />
</template>

<script>
import Header from "./Header";
import Footer from "./Footer";

export default {
  name: "User",
  data() {
    return {
      auth:null,
      ifLogin:false,
    };
  },
  components: {
    Header,
    Footer,
  },
  methods:{
    init:async function(){
      let response = await this.$store.state.auth.trackSession()
      if(response.session!==null){
        this.ifLogin=true
        document.getElementsByClassName("UserInfo")[0].innerText=JSON.stringify(response.userInfo,null,1)
      }
    },
    logout:function(){
      this.$store.state.auth.logout()
      .then(()=>{
        this.ifLogin=false
        this.$router.push({name:"HomePage"})
      })
    }
  },
  created(){
    this.init()
  }
};
</script>

<style scoped>
.User{
  width: 100%;
  height: 85vh;
  margin-top:50px ;
  overflow: auto;
}
</style>
